<template>
    <div id="detail-model">
        <el-dialog
            title="模型详情"
            v-model="isShowDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="65%" 
            :destroy-on-close="true"
            @close="handleClose"
        >
            <el-descriptions :column="2" size="large" border>
                <el-descriptions-item
                    label="名称"
                    label-align="right"
                    align="center"
                    label-class-name="my-label"
                    class-name="my-content"
                >{{ item.v_Name}}</el-descriptions-item>
                
                <el-descriptions-item label="版本" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    <el-tag size="small">{{item.n_Version}}</el-tag>
                </el-descriptions-item>
                
                <el-descriptions-item label="备注" label-align="right" align="center" label-class-name="my-label" class-name="my-content" span="2">
                    {{item.v_Remark}}
                </el-descriptions-item>
            </el-descriptions>

            <el-table :data="item.binds" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                <el-table-column type="index" label="序号" width="55" align="center" />
                <el-table-column label="模型"  align="center">
                    <template #default="scope">
                        <div class="bind-item">
                            <span style="color: #9c381a;"> 【名称：{{scope.row.v_AlgorithmName}}】 </span>
                            <span style="color: #67C23A;"> 【模型库名称：{{scope.row.v_AlgorithmLibName}}】 </span>
                            <span style="color: #777976;"> 【模型方法名称：{{scope.row.v_AlgorithmMethodName}}】 </span>
                            <span style="color: #eb7718;"> 【版本：{{scope.row.n_AlgorithmVersion}}】 </span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="模型"  align="center">
                    <template #default="scope">
                        <div class="bind-item">
                            <span style="color: #9c381a;"> 【名称：{{scope.row.v_ModelName}}】 </span>
                            <span style="color: #eb7718;"> 【版本：{{scope.row.n_ModelVersion}}】 </span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="设备"  align="center">
                    <template #default="scope">
                        <div class="bind-item">
                            <span style="color: #9c381a;"> 【名称：{{scope.row.v_DeviceName}}】 </span>
                            <span style="color: #67C23A;"> 【设备编码：{{scope.row.v_DeviceCode}}】 </span>
                            <span style="color: #777976;" v-if="scope.row.n_DeviceType === 0"> 【设备类型：摄像头】 </span>
                            <span style="color: #777976;" v-else-if="scope.row.n_DeviceType === 1"> 【设备类型：安全帽】 </span>
                            <span style="color: #777976;" v-else-if="scope.row.n_DeviceType === 2"> 【设备类型：无人机】 </span>
                            <span style="color: #777976;" v-else> 【设备类型：未知】 </span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="80px" >
                    <template #default="scope">
                        <el-button @click="unbind(scope.row.n_Id)" class="icon-e" icon="ele-Edit" size="small" text type="primary"> 解绑 </el-button>
                        
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <el-button @click="handleClose">关闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { ElButton, ElDialog, ElDescriptions, ElDescriptionsItem, ElMessageBox, ElMessage } from 'element-plus'
import { GetDetailWithBind } from '/@/api/its/model'
import { Delete as DeleteBind } from '/@/api/its/algorithm-model-device-bind'
import { ItemType } from '/@/types/its/ItsType'

export default defineComponent( {
    name: 'detail-model',
    props: {
        isShowDialog:{
            type: Boolean,
            default: false,
        },
        item: {
            type: Object as () => ItemType,
            default: null,
        }
    },
    setup(props,ctx){

        const loading = ref(false)
        const item:any = ref({})
        
        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            closeEvent()
        }

        /*** closeEvent 取消事件 */
        const closeEvent = () => {
            ctx.emit('close')
        }

        //获取详情
        const getDetail = async () => {
            try {
                loading.value = true
                let res = await GetDetailWithBind({id: props.item.n_Id})
                if (res && res.data) {
                    item.value = res.data
                }
            }catch(err) {
                ctx.emit('close')
            }finally {
                loading.value = false
            }
        }

        //解绑
        const unbind = async (val: Number) => {
            ElMessageBox.confirm('请确定是否解绑此条数据','警告',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async() => {
                let param = {n_Id : val}
                try {
                    let res: any = await DeleteBind(param)
                    if(res.success){
                        await getDetail()
                    }
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        }
        onMounted(async () => {
            await getDetail()
        })

        return {
            handleClose,
            loading,
            item,
            unbind
        }
    },
} )
</script>
<style scoped lang="scss">
#detail-model{
    :deep(.el-select){
        width: 100%;
    }
    :deep(.el-input){
        width: 100%;
    }
    .bind-item {
        display: flex;
        flex-direction: column;
        align-items:flex-start;
    }
}
</style>